<template>
	<view class="content">
		<view class="userInfo">
			<u-cell-group>
				<u-cell title="头像">
					<u-avatar :src="person.avatarUrl" slot="value" class="u-slot-value"></u-avatar>
				</u-cell>
				<u-cell title="姓名" :value="person.nickName" :isLink="true" @click="updateName({type:
					'姓名',value:person.nickName})"></u-cell>
				<u-cell title="性别" :value="person.sex" :isLink="true" @click.native="selectSex()"></u-cell>
				<u-cell title="手机号" :value="person.phone" :isLink="true" @click.native="updatephone({type:
					'手机号',value:person.phone})"></u-cell>
			</u-cell-group>
		</view>
		<view class="sexPicker">
			<u-picker :show="sexPickerShow" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"
				@cancel="cancel()" confirmColor="#1ba784"></u-picker>
		</view>
		<view>
		</view>
		<view class="loginOut">
			<u-modal :show="show" :content='content' :showCancelButton="true" @confirm="confirmLoginOut()"
				@cancel="cancelLoginOut()" confirmColor="#1ba784" :closeOnClickOverlay="true" :mask-close-able="true"
				:async-close="true"></u-modal>
			<u-button type="primary" @click.native="loginOut()" color="#1ba784" shape="circle">退出登录</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//打开模态框的状态
				show: false,
				content: "是否退出登录",
				sexPickerShow: false,
				columns: [
					['男', '女', '保密']
				],
				// 手机号
				person: {
					nickName: '微信用户',
					sex: '保密',
					phone: '18779351586',
					avatarUrl: 'https://oldermp.tzfcw.top/image/1.jpg',
				}
			};
		},
		onLoad() {
			//添加updateName事件
			uni.$on("updateName", (res) => {
				this.updateEmitName(res);
			});
			uni.$on("updatePhone", (res) => {
				this.updateEmitPhone(res);
			})
			// //读取缓存
			let personInfo = uni.getStorageSync("personInfo");
			if (personInfo != "" && personInfo != null) {
				this.person = personInfo;
			}
		},
		watch: {
			"person.nickName": {
				handler(newvalue, oldvalue) {
					//监视到数据改变强制更新虚拟dom
					this.$forceUpdate();
				}
			}
		},
		methods: {
			//退出登录
			loginOut() {
				//通过自定义事件触发登录事件
				//清除缓存
				this.show = true;
			},
			//取消退出登录
			cancelLoginOut() {
				this.show = false;
			},
			//确定退出登录
			confirmLoginOut() {
				this.show = false;
				uni.clearStorageSync()
				//清除成功跳转至主页
				this.gotoHome()
			},
			//
			gotoHome() {
				uni.switchTab({
					url: "/pages/my/my"
				})
			},
			//发起网络请求修改用户信息
			updateUserInfoByRequest() {
				this.$request("/user/update", "PUT", {
					token: uni.getStorageSync("token"),
					"content-type": "application/json"
				}, {
					...uni.getStorageSync("personInfo")
				}).then(res => {
					console.log(`${res.data.message}`);
				}).catch(error => {
					console.log(`${error}`);
				})
			},
			updateEmitPhone(value) {
				this.person.phone = value;
				//改变缓存
				uni.setStorageSync("personInfo", this.person);
				this.updateUserInfoByRequest();
			},
			updateEmitName(value) {
				this.person.nickName = value;
				//改变缓存
				uni.setStorageSync("personInfo", this.person);
				this.updateUserInfoByRequest();
			},
			// 修改姓名
			updateName(type) {
				this.updateUserInfo(type);
			},
			//抽取跳转修改方法
			updateUserInfo(options) {
				uni.navigateTo({
					url: `/pages/userInfoUpdate/userInfoUpdate?type=${options.type}&value=${options.value}`
				})
			},
			//修改手机号
			updatephone(type) {
				this.updateUserInfo(type);
			},
			// 修改头像
			updateAvatar() {
				uni.setStorageSync("personInfo", this.person);
			},
			selectSex() {
				//开下下拉选择框
				this.sexPickerShow = true;
			},
			confirm(e) {
				//解构value
				const {
					value
				} = e;
				this.person.sex = value[0];
				//修改缓存
				uni.setStorageSync("personInfo", this.person);
				this.updateUserInfoByRequest();
				this.cancel();
			},
			changeHandler(e) {
				console.log("change");
			},
			cancel() {
				//关闭下拉选择框
				this.sexPickerShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content ::v-deep .userInfo {
		margin-top: 30rpx;
		padding: 0rpx 15rpx;
	}

	.loginOut {
		margin-top: 30%;
		padding: 0 20%;
	}
</style>